<template>
  <div
    class="modal-mask"
    v-show="modalShow"
  >
    <div
      class="ui-modal"
      ref="uiModal"
      :style="{
        width: width + 'px',
        borderRadius: borderRadius + 'px',
        marginLeft: - width / 2 + 'px',
        top: position === 'center' ? '50%' : '50px',
        marginTop: position === 'center' ? - uiModalHeight / 2 + 'px' : ''
      }"
    >
      <header
        class="header"
        :style="{
          color: headerTextColor,
          backgroundColor: headerColor
        }"
      >
        <h1>{{ headerText }}</h1>
        <a
          href="javascript:;"
          @click="close"
        >&times;</a>
        <slot name="header"></slot>
      </header>
      <article class="content">
        <p
          :style="{
            color: contentTextColor
          }"
        >{{ contentText }}</p>
        <slot name="content"></slot>
      </article>
      <div
        class="btn-group"
        v-if="btnGroupShow"
      >
        <button
          class="btn btn-confirm"
          :style="{
            backgroundColor: headerColor
          }"
          @click="confirm"
        >{{ confirmText }}</button>
        <button
          class="btn btn-cancel"
          @click="close"
        >{{ cancelText }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue';

export default {
  name: 'Modal',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 300,
    },
    borderRadius: {
      type: Number,
      default: 10,
    },
    headerColor: {
      type: String,
      default: '#000',
    },
    headerText: {
      type: String,
      default: '',
    },
    headerTextColor: {
      type: String,
      default: '#fff',
    },
    contentText: {
      type: String,
      default: '',
    },
    contentTextColor: {
      type: String,
      default: '#000',
    },
    position: {
      type: String,
      default: 'top',
    },
    btnGroupShow: {
      type: Boolean,
      default: false,
    },
    confirmText: {
      type: String,
      default: '确定',
    },
    cancelText: {
      type: String,
      default: '取消',
    }
  },
  setup(props, { emit }) {

    const uiModal = ref(null),
          state = reactive({
            uiModalHeight: 0,
            modalShow: props.show
          })

    onMounted(() => {
      state.uiModalHeight = uiModal.value.offsetHeight;
    })

    const confirm = (e) => {
      state.modalShow = false;
      emit('confirm');
    }

    const close = (e) => {
      state.modalShow = false;
      emit('close');
    }

    return {
      uiModal,
      ...toRefs(state),
      confirm,
      close
    }
  }
}
</script>

<style lang="scss" scoped>
  .modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0 , 0, 0, .3);

    a {
      color: inherit;
      outline: none;
      text-decoration: none;
    }
    h1,
    p {
      margin: 0;
      font-weight: normal;
    }
    button {
      outline: none;
      border: none;
    }

    .ui-modal {
      position: fixed;
      left: 50%;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 1px 2px 3px #333;

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        padding: 0 15px;
        box-sizing: border-box;

        h1 {
          font-size: 18px;
          line-height: 44px;
        }
        a {
          font-size: 20px;
        }
      }

      .content {
        padding: 15px;
        box-sizing: border-box;
      }

      .btn-group {
        height: 30px;
        padding: 10px 15px;
        border-top: 1px solid #ddd;
        .btn {
          float: right;
          min-width: 80px;
          height: 30px;
          font-size: 14px;
          border-radius: 3px;
          cursor: pointer;

          &.btn-confirm {
            margin-left: 15px;
            color: #fff;
          }

          &.btn-cancel {
            color: #666;
            background-color: #ddd;
          }
        }
        
      }
    }
  }
</style>